<template>
  <view class="statistics-dashboard">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <view class="back-button" @click="navigateBack">
        <uni-icon type="left" size="24" color="#333" />
      </view>
      <view class="page-title">学习统计</view>
      <view class="right-space"></view>
    </view>

    <!-- 数据筛选器 -->
    <view class="filter-bar">
      <view class="filter-item" 
        v-for="(item, index) in filterOptions" 
        :key="index"
        :class="{ active: currentFilter === item.value }"
        @click="changeFilter(item.value)">
        {{ item.label }}
      </view>
    </view>

    <!-- 核心数据卡片 -->
    <view class="stats-cards">
      <view class="stat-card" v-for="(card, index) in statCards" :key="index">
        <view class="stat-icon" :style="{ backgroundColor: card.color }">
          <uni-icon :type="card.icon" size="28" color="#fff" />
        </view>
        <view class="stat-content">
          <view class="stat-value">{{ card.value }}</view>
          <view class="stat-label">{{ card.label }}</view>
          <view class="stat-change" :class="{ positive: card.change > 0, negative: card.change < 0 }">
            <uni-icon :type="card.change > 0 ? 'arrowup' : 'arrowdown'" size="12" />
            {{ Math.abs(card.change) }}%
          </view>
        </view>
      </view>
    </view>

    <!-- 学习趋势图 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title">学习趋势</view>
        <view class="chart-actions">
          <view class="chart-type" :class="{ active: chartType === 'line' }" @click="chartType = 'line'">
            折线图
          </view>
          <view class="chart-type" :class="{ active: chartType === 'bar' }" @click="chartType = 'bar'">
            柱状图
          </view>
        </view>
      </view>
      <canvas 
        id="trendChart" 
        class="chart-canvas"
        type="2d"
        :style="{ width: chartWidth + 'px', height: '220px' }"
      ></canvas>
    </view>

    <!-- 学习分布 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title">学习分布</view>
        <view class="chart-actions">
          <view class="chart-type" :class="{ active: distributionType === 'pie' }" @click="distributionType = 'pie'">
            饼图
          </view>
          <view class="chart-type" :class="{ active: distributionType === 'list' }" @click="distributionType = 'list'">
            列表
          </view>
        </view>
      </view>
      <view class="distribution-content">
        <!-- 饼图视图 -->
        <canvas 
          v-if="distributionType === 'pie'"
          id="distributionChart" 
          class="chart-canvas"
          type="2d"
          :style="{ width: chartWidth + 'px', height: '200px' }"
        ></canvas>
        
        <!-- 列表视图 -->
        <view v-else class="distribution-list">
          <view class="distribution-item" v-for="(item, index) in distributionData" :key="index">
            <view class="item-left">
              <view class="color-indicator" :style="{ backgroundColor: colors[index] }"></view>
              <view class="item-label">{{ item.label }}</view>
            </view>
            <view class="item-right">
              <view class="item-value">{{ item.value }}</view>
              <view class="item-percentage">{{ item.percentage }}%</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 技能雷达图 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title">技能评估</view>
      </view>
      <canvas 
        id="radarChart" 
        class="chart-canvas"
        type="2d"
        :style="{ width: chartWidth + 'px', height: '250px' }"
      ></canvas>
    </view>

    <!-- 学习建议 -->
    <view class="recommendations-section">
      <view class="section-header">
        <view class="section-title">学习建议</view>
      </view>
      <view class="recommendations-list">
        <view class="recommendation-item" v-for="(item, index) in recommendations" :key="index">
          <uni-icon type="bulb" size="16" color="#FF9800" />
          <view class="recommendation-text">{{ item }}</view>
        </view>
      </view>
    </view>

    <!-- 近期活动 -->
    <view class="activities-section">
      <view class="section-header">
        <view class="section-title">近期活动</view>
        <view class="view-more" @click="navigateToActivities">查看更多</view>
      </view>
      <view class="activities-list">
        <view class="activity-item" v-for="(item, index) in recentActivities" :key="index">
          <view class="activity-icon" :style="{ backgroundColor: getActivityColor(item.type) }">
            <uni-icon :type="getActivityIcon(item.type)" size="18" color="#fff" />
          </view>
          <view class="activity-content">
            <view class="activity-title">{{ item.title }}</view>
            <view class="activity-time">{{ formatDate(item.time) }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 成长里程碑 -->
    <view class="milestones-section">
      <view class="section-header">
        <view class="section-title">成长里程碑</view>
      </view>
      <view class="milestones-list">
        <view class="milestone-item" v-for="(milestone, index) in milestones" :key="index">
          <view class="milestone-icon" :class="{ achieved: milestone.achieved }">
            <uni-icon :type="milestone.achieved ? 'success' : 'circle'" size="20" color="#fff" />
          </view>
          <view class="milestone-content">
            <view class="milestone-title">{{ milestone.title }}</view>
            <view class="milestone-description">{{ milestone.description }}</view>
            <view class="milestone-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: milestone.progress + '%' }"></view>
              </view>
              <view class="progress-text">{{ milestone.progress }}%</view>
            </view>
            <view v-if="milestone.achieved" class="achievement-date">
              达成于 {{ formatDate(milestone.date) }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { CHART_TYPES, ChartFactory, ChartUtils } from '../../components/statistics/ChartComponents';
import { statisticsApi } from '../../api/statistics';
import { dataCache } from '../../utils/dataCache';

const router = useRouter();

// 响应式数据
const currentFilter = ref('week'); // week, month, year
const chartType = ref('line');
const distributionType = ref('pie');
const chartWidth = ref(0);
const isLoading = ref(false);

// 统计数据
const statCards = ref([
  { icon: 'chatbubble-ellipses', value: '0', label: '学习单词', change: 0, color: '#2196F3' },
  { icon: 'checkmark-circle', value: '0', label: '掌握单词', change: 0, color: '#4CAF50' },
  { icon: 'time', value: '0', label: '学习时长(分钟)', change: 0, color: '#FF9800' },
  { icon: 'star', value: '0', label: '正确率(%)', change: 0, color: '#9C27B0' }
]);

// 趋势图数据
const trendData = ref([]);
// 分布图数据
const distributionData = ref([]);
// 技能评估数据
const skillData = ref([]);
// 学习建议
const recommendations = ref([]);
// 近期活动
const recentActivities = ref([]);
// 成长里程碑
const milestones = ref([]);

// 图表实例
let trendChartInstance = null;
let distributionChartInstance = null;
let radarChartInstance = null;

// 颜色数组
const colors = ['#2196F3', '#4CAF50', '#FF9800', '#F44336', '#9C27B0', '#3F51B5', '#00BCD4', '#FFC107'];

// 筛选选项
const filterOptions = [
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '全年', value: 'year' }
];

// 初始化
onMounted(async () => {
  // 计算图表宽度（适应屏幕）
  const sysInfo = uni.getSystemInfoSync();
  chartWidth.value = sysInfo.windowWidth - 32; // 16px padding on each side
  
  // 加载数据
  await loadStatisticsData();
  
  // 初始化图表
  initCharts();
  
  // 监听窗口大小变化
  uni.onWindowResize(handleWindowResize);
});

// 清理
onUnmounted(() => {
  // 销毁图表实例
  if (trendChartInstance) trendChartInstance = null;
  if (distributionChartInstance) distributionChartInstance = null;
  if (radarChartInstance) radarChartInstance = null;
  
  // 移除事件监听
  uni.offWindowResize(handleWindowResize);
});

// 处理窗口大小变化
function handleWindowResize(res) {
  chartWidth.value = res.windowWidth - 32;
  // 重新渲染图表
  updateCharts();
}

// 切换筛选条件
async function changeFilter(filter) {
  currentFilter.value = filter;
  await loadStatisticsData();
  updateCharts();
}

// 加载统计数据
async function loadStatisticsData() {
  isLoading.value = true;
  try {
    // 尝试从缓存获取数据
    const cacheKey = `statistics_${currentFilter.value}_${Date.now()}`;
    const cachedData = await dataCache.get(cacheKey);
    
    if (cachedData) {
      processStatisticsData(cachedData);
    } else {
      // 调用API获取数据
      const [overviewData, trendResult, distributionResult, skillResult] = await Promise.all([
        statisticsApi.getLearningOverview({ period: currentFilter.value }),
        statisticsApi.getLearningTrend({ period: currentFilter.value }),
        statisticsApi.getLearningDistribution({ period: currentFilter.value }),
        statisticsApi.getSkillAssessment()
      ]);
      
      // 组合所有数据
      const combinedData = {
        overview: overviewData,
        trend: trendResult,
        distribution: distributionResult,
        skills: skillResult
      };
      
      // 缓存数据（5分钟有效期）
      await dataCache.set(cacheKey, combinedData, 300);
      
      // 处理数据
      processStatisticsData(combinedData);
    }
  } catch (error) {
    console.error('加载统计数据失败:', error);
    // 使用模拟数据
    loadMockData();
  } finally {
    isLoading.value = false;
  }
}

// 处理统计数据
function processStatisticsData(data) {
  // 更新核心数据卡片
  if (data.overview) {
    statCards.value = [
      { 
        icon: 'chatbubble-ellipses', 
        value: ChartUtils.formatNumber(data.overview.totalWordsLearned || 0), 
        label: '学习单词', 
        change: data.overview.wordsLearnedChange || 0,
        color: '#2196F3' 
      },
      { 
        icon: 'checkmark-circle', 
        value: ChartUtils.formatNumber(data.overview.masteredWords || 0), 
        label: '掌握单词', 
        change: data.overview.masteredWordsChange || 0,
        color: '#4CAF50' 
      },
      { 
        icon: 'time', 
        value: ChartUtils.formatNumber(data.overview.totalStudyTime || 0), 
        label: '学习时长(分钟)', 
        change: data.overview.studyTimeChange || 0,
        color: '#FF9800' 
      },
      { 
        icon: 'star', 
        value: `${Math.round(data.overview.averageAccuracy || 0)}%`, 
        label: '正确率(%)', 
        change: data.overview.accuracyChange || 0,
        color: '#9C27B0' 
      }
    ];
  }
  
  // 更新趋势图数据
  if (data.trend && data.trend.length > 0) {
    trendData.value = data.trend.map(item => ({
      label: item.label || '',
      value: item.value || 0
    }));
  }
  
  // 更新分布图数据
  if (data.distribution && data.distribution.length > 0) {
    const total = data.distribution.reduce((sum, item) => sum + (item.value || 0), 0);
    distributionData.value = data.distribution.map(item => ({
      label: item.label || '',
      value: item.value || 0,
      percentage: total > 0 ? Math.round(((item.value || 0) / total) * 100) : 0
    }));
  }
  
  // 更新技能评估数据
  if (data.skills && data.skills.length > 0) {
    skillData.value = data.skills.map(item => ({
      label: item.label || '',
      value: item.score || 0
    }));
  }
  
  // 更新学习建议
  recommendations.value = data.overview?.recommendations || [
    '建议每天保持至少15分钟的学习时间',
    '可以尝试使用不同的学习模式',
    '加强对错误单词的复习频率',
    '设置每周的学习目标以提高效率'
  ];
  
  // 更新近期活动
  recentActivities.value = data.overview?.recentActivities || [
    { title: '完成每日单词学习', type: 'study', time: new Date() },
    { title: '解锁新的学习单元', type: 'achievement', time: new Date(Date.now() - 86400000) },
    { title: '连续学习5天', type: 'streak', time: new Date(Date.now() - 172800000) },
    { title: '通过单词测试', type: 'test', time: new Date(Date.now() - 259200000) }
  ];
  
  // 更新里程碑
  milestones.value = data.overview?.milestones || [
    { 
      title: '学习达人', 
      description: '累计学习1000个单词', 
      progress: 75, 
      achieved: false 
    },
    { 
      title: '坚持之星', 
      description: '连续学习30天', 
      progress: 100, 
      achieved: true,
      date: new Date(Date.now() - 864000000) 
    },
    { 
      title: '准确率大师', 
      description: '测试准确率达到95%', 
      progress: 85, 
      achieved: false 
    }
  ];
}

// 加载模拟数据（用于演示）
function loadMockData() {
  const period = currentFilter.value;
  
  // 根据不同时间范围生成模拟数据
  let labels = [];
  let trendValues = [];
  
  if (period === 'week') {
    const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    labels = days;
    trendValues = [45, 62, 48, 75, 58, 92, 85];
  } else if (period === 'month') {
    // 生成最近30天的日期标签
    for (let i = 29; i >= 0; i--) {
      const date = new Date(Date.now() - i * 86400000);
      labels.push(`${date.getDate()}日`);
    }
    // 生成随机趋势数据
    trendValues = labels.map(() => Math.floor(Math.random() * 60) + 40);
  } else {
    // 全年数据
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    labels = months;
    trendValues = [1200, 1350, 1280, 1560, 1680, 1720, 1850, 1920, 2100, 2250, 2400, 2580];
  }
  
  // 模拟趋势数据
  trendData.value = labels.map((label, index) => ({
    label,
    value: trendValues[index]
  }));
  
  // 模拟分布数据
  distributionData.value = [
    { label: '复习模式', value: 45, percentage: 45 },
    { label: '拼写模式', value: 25, percentage: 25 },
    { label: '听力模式', value: 20, percentage: 20 },
    { label: '口语模式', value: 10, percentage: 10 }
  ];
  
  // 模拟技能数据
  skillData.value = [
    { label: '词汇量', value: 80 },
    { label: '拼写', value: 75 },
    { label: '听力', value: 65 },
    { label: '口语', value: 60 },
    { label: '阅读', value: 85 }
  ];
  
  // 更新其他数据...
  processStatisticsData({ overview: {} });
}

// 初始化图表
function initCharts() {
  // 初始化趋势图
  setTimeout(() => {
    const trendOptions = {
      canvasId: 'trendChart',
      width: chartWidth.value,
      height: 220,
      theme: {
        colors: ['#2196F3'],
        background: '#ffffff',
        textColor: '#333333',
        gridColor: '#e0e0e0'
      }
    };
    
    trendChartInstance = ChartFactory.createChart(
      chartType.value === 'line' ? CHART_TYPES.LINE : CHART_TYPES.BAR,
      trendOptions
    );
    
    if (trendData.value.length > 0) {
      trendChartInstance.setData(trendData.value);
    }
    
    // 初始化分布图
    const distributionOptions = {
      canvasId: 'distributionChart',
      width: chartWidth.value,
      height: 200,
      theme: {
        colors: colors,
        background: '#ffffff',
        textColor: '#333333'
      },
      config: {
        showLabels: true,
        showValues: true,
        labelPosition: 'outside'
      }
    };
    
    distributionChartInstance = ChartFactory.createChart(
      CHART_TYPES.PIE,
      distributionOptions
    );
    
    if (distributionData.value.length > 0) {
      distributionChartInstance.setData(distributionData.value);
    }
    
    // 初始化雷达图
    const radarOptions = {
      canvasId: 'radarChart',
      width: chartWidth.value,
      height: 250,
      theme: {
        colors: ['#4CAF50'],
        background: '#ffffff',
        textColor: '#333333',
        gridColor: '#e0e0e0'
      },
      config: {
        showGrid: true,
        showLabels: true,
        showPoints: true,
        showArea: true
      }
    };
    
    radarChartInstance = ChartFactory.createChart(
      CHART_TYPES.RADAR,
      radarOptions
    );
    
    if (skillData.value.length > 0) {
      radarChartInstance.setData(skillData.value);
    }
  }, 100);
}

// 更新图表
function updateCharts() {
  // 更新趋势图类型
  if (trendChartInstance) {
    const chartTypeToUse = chartType.value === 'line' ? CHART_TYPES.LINE : CHART_TYPES.BAR;
    const options = {
      canvasId: 'trendChart',
      width: chartWidth.value,
      height: 220
    };
    
    // 销毁旧实例，创建新实例
    trendChartInstance = null;
    trendChartInstance = ChartFactory.createChart(chartTypeToUse, options);
    if (trendData.value.length > 0) {
      trendChartInstance.setData(trendData.value);
    }
  }
  
  // 更新分布图尺寸
  if (distributionChartInstance && distributionType.value === 'pie') {
    distributionChartInstance.updateOptions({
      width: chartWidth.value,
      height: 200
    });
    if (distributionData.value.length > 0) {
      distributionChartInstance.setData(distributionData.value);
    }
  }
  
  // 更新雷达图尺寸
  if (radarChartInstance) {
    radarChartInstance.updateOptions({
      width: chartWidth.value,
      height: 250
    });
    if (skillData.value.length > 0) {
      radarChartInstance.setData(skillData.value);
    }
  }
}

// 获取活动颜色
function getActivityColor(type) {
  const colorMap = {
    study: '#2196F3',
    test: '#4CAF50',
    achievement: '#FF9800',
    streak: '#9C27B0'
  };
  return colorMap[type] || '#3F51B5';
}

// 获取活动图标
function getActivityIcon(type) {
  const iconMap = {
    study: 'chatbubble-ellipses',
    test: 'checkmark-circle',
    achievement: 'trophy',
    streak: 'flame'
  };
  return iconMap[type] || 'ellipse';
}

// 格式化日期
function formatDate(date) {
  return ChartUtils.formatDate(date, 'MM-DD HH:mm');
}

// 导航返回
function navigateBack() {
  router.back();
}

// 导航到活动页面
function navigateToActivities() {
  router.push('/pages/statistics/activities');
}
</script>

<style scoped>
.statistics-dashboard {
  padding-bottom: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.back-button,
.right-space {
  width: 24px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 12px;
}

.filter-item {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
}

.filter-item.active {
  background-color: #2196F3;
  color: #fff;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.stat-change {
  font-size: 11px;
  display: flex;
  align-items: center;
}

.stat-change.positive {
  color: #4CAF50;
}

.stat-change.negative {
  color: #F44336;
}

/* 图表区域 */
.chart-section {
  margin-bottom: 16px;
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-type {
  padding: 4px 8px;
  font-size: 12px;
  color: #666;
  background-color: #f5f7fa;
  border-radius: 4px;
  transition: all 0.3s;
}

.chart-type.active {
  background-color: #2196F3;
  color: #fff;
}

.chart-canvas {
  margin: 0 auto;
}

/* 分布列表 */
.distribution-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.item-label {
  font-size: 14px;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.item-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.item-percentage {
  font-size: 12px;
  color: #666;
}

/* 建议区域 */
.recommendations-section {
  margin-bottom: 16px;
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.view-more {
  font-size: 14px;
  color: #2196F3;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background-color: #FFF8E1;
  border-radius: 8px;
  border-left: 4px solid #FF9800;
}

.recommendation-text {
  flex: 1;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 活动区域 */
.activities-section {
  margin-bottom: 16px;
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 里程碑区域 */
.milestones-section {
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.milestones-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.milestone-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.milestone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.milestone-icon.achieved {
  background-color: #4CAF50;
}

.milestone-content {
  flex: 1;
}

.milestone-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.milestone-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.milestone-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.3s;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 35px;
  text-align: right;
}

.achievement-date {
  font-size: 11px;
  color: #999;
  font-style: italic;
}

/* 响应式调整 */
@media (max-width: 320px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .stat-value {
    font-size: 18px;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>